<template>
  <div class="app-container">
    <el-form
      ref="elForm"
      :disabled="$route.query.isInfo"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="120px"
    >
      <h2 style="text-align: center">劳动合同</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="员工" prop="userId">
            <el-input
              v-model="formData.nickName"
              :disabled="true"
              placeholder="员工"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
            <!-- <UserDialog @change="changeUser" v-model="formData.userId"></UserDialog> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="formData.remark"
          type="textarea"
          placeholder="请输入多行文本备注"
          :autosize="{ minRows: 4, maxRows: 4 }"
        ></el-input>
      </el-form-item>
      <div class="table">
        <el-form-item label="增加表单" prop="form" style="margin-left: 0">
          <el-button type="primary" plain size="mini" @click="handleAddBox">增行</el-button>
          <el-button type="danger" plain size="mini" @click="handleDeleBox">删行</el-button>
          <!-- {{ formData.certItemBos }} -->
          <el-table :data="formData.certItemBos" :border="true" style="width: 100%; ">
            <el-table-column width="180" label="合同类别" align="center">
              <template slot-scope="scope">
                <el-form-item
                  label-width="0"
                  :prop="`certItemBos.${scope.$index}.contractCategoryValue`"
                  :rules="rules.contractCategoryValue"
                >
                  <el-select
                    v-model="scope.row.contractCategoryValue"
                    placeholder="请选择合同类别"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="dict in dict.type.sys_contract_item"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column width="180" label="合同类型" align="center">
              <template slot-scope="scope">
                <el-form-item
                  label-width="0"
                  :prop="`certItemBos.${scope.$index}.contractTypeValue`"
                  :rules="rules.contractTypeValue"
                >
                  <el-select
                    v-model="scope.row.contractTypeValue"
                    placeholder="请选择合同类型"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="dict in dict.type.sys_contract_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column width="180" label="签约日期" align="center">
              <template slot-scope="scope">
                <el-form-item
                  label-width="0"
                  :prop="`certItemBos.${scope.$index}.signData`"
                  :rules="rules.signData"
                >
                  <el-date-picker
                    v-model="scope.row.signData"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    :style="{ width: '100%' }"
                    placeholder="请选择签约日期"
                    clearable
                  ></el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column width="180" label="生效时间" align="center">
              <template slot-scope="scope">
                <el-form-item
                  label-width="0"
                  :prop="`certItemBos.${scope.$index}.startDate`"
                  :rules="rules.startDate"
                >
                  <el-date-picker
                    v-model="scope.row.startDate"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    :style="{ width: '100%' }"
                    placeholder="请选择生效时间"
                    clearable
                  ></el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column width="180" label="失效时间" align="center">
              <template slot-scope="scope">
                <el-form-item
                  label-width="0"
                  :prop="`certItemBos.${scope.$index}.endDate`"
                  :rules="rules.endDate"
                >
                  <el-date-picker
                    v-model="scope.row.endDate"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    :style="{ width: '100%' }"
                    placeholder="请选择失效时间"
                    clearable
                  ></el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="合同附件" align="center">
              <template slot-scope="scope">
                <el-form-item
                  label-width="0"
                  :prop="`certItemBos.${scope.$index}.oss`"
                  :rules="rules.oss"
                >
                  <!-- <FileUpload v-model="scope.row.oss"></FileUpload> -->
                  <FileUploadBase :isDelete="!$route.query.isInfo" v-model="scope.row.oss"></FileUploadBase>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </div>
      <!-- <h4 class="form-header h4">附件信息</h4> -->
      <!-- <el-form-item label="" prop="oss">
        <FileUploadBase :isDelete="!$route.query.isInfo" v-model="formData.oss"></FileUploadBase>
      </el-form-item>-->

      <el-col :span="24">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button v-if="!$route.query.isInfo" type="primary" @click="submitForm">提交</el-button>
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import {
  contractAdd,
  updateContract,
  contractInfo
} from "@/api/finance/personnel/contract.js";

export default {
  dicts: [
    "sys_contract_item",
    "sys_contract_type",
    "sys_contract_property",
    "sys_contract_status",
    "sys_contract_time",
    "sys_contract_zzbs"
  ],

  components: {},
  props: [],
  data() {
    return {
      formData: {
        certItemBos: [
          {
            oss: undefined,
            contractCategoryValue: undefined,
            contractTypeValue: undefined,
            contractNo: undefined,
            userId: undefined,
            contractCategoryValue: undefined,
            contractName: undefined,
            contractTypeValue: undefined,
            contractAttValue: undefined,
            isApplyValue: undefined,
            statusValue: undefined,
            periodYearValue: undefined,
            tryMonthNum: undefined,
            tryMoney: undefined,
            officialMoney: undefined,
            signData: null,
            startDate: null,
            endDate: null,
            tryEndDate: null,
            preEndDate: null,
            remindUserId: undefined,
            remark: ""
          }
        ]
      },
      rules: {
        contractNo: [
          {
            required: true,
            message: "请输入合同编号",
            trigger: "blur"
          }
        ],
        userId: [
          {
            required: true,
            message: "请选择员工",
            trigger: "blur"
          }
        ],
        contractCategoryValue: [
          {
            required: true,
            message: "请选择合同类别",
            trigger: "change"
          }
        ],
        oss: [
          {
            required: true,
            message: "附件不能为空",
            trigger: "change"
          }
        ],
        contractName: [
          {
            required: true,
            message: "请输入合同名称",
            trigger: "blur"
          }
        ],
        contractTypeValue: [
          {
            required: true,
            message: "请选择合同类型",
            trigger: "change"
          }
        ],
        contractAttValue: [
          {
            required: true,
            message: "请选择合同属性",
            trigger: "change"
          }
        ],
        isApplyValue: [
          {
            required: true,
            message: "请选择转正标识",
            trigger: "change"
          }
        ],
        statusValue: [
          {
            required: true,
            message: "请选择合同状态",
            trigger: "change"
          }
        ],
        periodYearValue: [
          {
            required: true,
            message: "请选择合同期限",
            trigger: "change"
          }
        ],
        tryMonthNum: [
          {
            required: true,
            message: "试用月数",
            trigger: "blur"
          }
        ],
        tryMoney: [
          {
            required: true,
            message: "试用工资",
            trigger: "blur"
          }
        ],
        officialMoney: [
          {
            required: true,
            message: "转正工资",
            trigger: "blur"
          }
        ],
        signData: [
          {
            required: true,
            message: "请选择签约日期",
            trigger: "change"
          }
        ],
        startDate: [
          {
            required: true,
            message: "请选择生效时间",
            trigger: "change"
          }
        ],
        endDate: [
          {
            required: true,
            message: "请选择失效时间",
            trigger: "change"
          }
        ],
        tryEndDate: [
          {
            required: true,
            message: "请选择试用结束日期",
            trigger: "change"
          }
        ],
        preEndDate: [
          {
            required: false,
            message: "请选择提前终止日期",
            trigger: "change"
          }
        ],
        remindUserId: [
          {
            required: true,
            message: "请选择提醒人",
            trigger: "change"
          }
        ]
      }
    };
  },
  computed: {},
  watch: {},
  created() {
    if (this.$route.query.nickName) {
      this.formData.nickName = this.$route.query.nickName;
      this.formData.userId = this.$route.query.userDocBaseId;
    }
    if (this.$route.query.isEdit || this.$route.query.isInfo) {
      this.getinfo();
    }
  },
  mounted() {},
  methods: {
    changeUser(e) {
      this.formData.nickName = e.nickName;
    },
    changeremindUser(e) {
      this.formData.remindUserNickName = e.nickName;
    },
    getinfo() {
      contractInfo(this.$route.query.id).then(response => {
        this.formData.certItemBos = response.data;
        this.formData.nickName = this.formData.certItemBos[0].nickName;
        this.formData.userId = this.formData.certItemBos[0].userId;
        this.formData.laborContractId = this.formData.certItemBos[0].laborContractId;
        this.$nextTick(() => {
          this.$set(
            this.formData,
            "remark",
            this.formData.certItemBos[0].remark
          );
        });
      });
    },
    handleAddBox() {
      this.formData.certItemBos.push({
        oss: undefined,
        contractCategoryValue: undefined,
        contractTypeValue: undefined
      });
    },
    handleDeleBox() {
      if (this.formData.certItemBos.length == 1) return;
      this.formData.certItemBos.pop();
    },
    submitForm() {
      this.formData.certItemBos.forEach((item, index) => {
        item.userId = this.formData.userId;
        item.remark = this.formData.remark;
        item.nickName = this.formData.nickName;
        item.contractCategoryLabel = this.dict.type.sys_contract_item.find(
          i => i.value === item.contractCategoryValue
        ).label;
        if (item.contractTypeValue == "2") {
          this.rules.endDate[0].required = false;
        }
        item.contractTypeLabel = this.dict.type.sys_contract_type.find(
          i => i.value === item.contractTypeValue
        ).label;
        item.isNewly = this.formData.certItemBos.length - 1 == index ? 1 : 0;
      });
      this.$refs["elForm"].validate(valid => {
        if (valid) {
          console.log(this.formData);

          console.log(this.formData);
          // let query = JSON.parse(JSON.stringify(this.formData));
          // console.log(query);

          // return
          // query.contractAttLabel = this.dict.type.sys_contract_property.find(
          //   (i) => i.value === query.contractAttValue
          // // ).label;
          // query.isApplyLabel = this.dict.type.sys_contract_zzbs.find(
          //   (i) => i.value === query.isApplyValue
          // ).label;
          // query.statusLabel = this.dict.type.sys_contract_status.find(
          //   (i) => i.value === query.statusValue
          // ).label;
          // query.periodYearLabel = this.dict.type.sys_contract_time.find(
          //   (i) => i.value === query.periodYearValue
          // ).label;

          if (this.formData.laborContractId != undefined) {
            updateContract(this.formData.certItemBos).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            contractAdd(this.formData.certItemBos).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        } else {
          this.$modal.msgWarning("请上传证书附件");
        }
      });
    },
    resetForm() {
      this.$router.go(-1);
      // const obj = { path: "./contract" };
      // this.$tab.closeOpenPage(obj);
    }
  }
};
</script>
